<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue'

// vue 2.0写法
// import { onBeforeMount } from 'vue'
// export default {
//   beforeCreate() {
//     console.log('beforeCreate')
//   },
//   created() {
//     console.log('created')
//   },
//   onBeforeMount() {
//     console.log('onBeforeMount')
//   },
//   beforeMount() {
//     console.log('beforeMount')
//   },
//   mounted() {
//     console.log('mounted')
//   },
//   beforeUpdate() {
//     console.log('beforeUpdate')
//   },
//   updated() {
//     console.log('updated')
//   },
//   beforeUnmount() {
//     console.log('beforeUnmount')
//   },
//   unmounted() {
//     console.log('unmounted')
//   }
// }
const age = ref(18)

const timeId = setInterval(() => {
  age.value++
}, 1000)

onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
onUpdated(() => {
  console.log('onUpdated')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  clearInterval(timeId)
})
onUnmounted(() => {
  console.log('onUnmounted')
})
</script>

<template>
  <div class="box">子组件</div>
  <div>{{ age }}</div>
</template>

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>
